<template>
    <div class="wrap cart">
        <div class="wrap-header">
            <el-table
                ref="multipleTable"
                :data="cartList"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    prop="goodsName"
                    label="商品">
                </el-table-column>
                <el-table-column
                    prop="goodsCount"
                    label="数量">
                </el-table-column>
                <el-table-column
                    prop="goodsSiglePrice"
                    label="单价">
                </el-table-column>
                <el-table-column
                    prop="goodsTotalPrice"
                    label="总价"
                    show-overflow-tooltip>
                </el-table-column>
            </el-table>
            <div class="mt16 right">
                <el-button @click="handleDelete()" type="primary" size="mini" :disabled="multipleSelection.length==0">
                    删除
                </el-button>
                <el-button size="mini" @click="dialogVisible = true" :disabled="multipleSelection.length==0">付款
                </el-button>
            </div>
            <el-dialog
                title="付款确认"
                :visible.sync="dialogVisible"
                width="60%">
                <div class="filter-item_4">
                    <div class="filter-item">
                        <div class="filter-item-key">收货人：</div>
                        <div class="filter-item-val">
                            {{userInfo.name}}
                        </div>
                    </div>
                    <div class="filter-item">
                        <div class="filter-item-key">地址：</div>
                        <div class="filter-item-val">
                            {{userInfo.address}}
                        </div>
                    </div>
                    <div class="filter-item">
                        <div class="filter-item-key">联系方式：</div>
                        <div class="filter-item-val">
                            {{userInfo.mobile}}
                        </div>
                    </div>
                    <el-table
                        :data="multipleSelection"
                        style="width: 100%"
                        class="mb32">
                        <el-table-column
                            prop="goodsName"
                            label="商品">
                        </el-table-column>
                        <el-table-column
                            prop="goodsCount"
                            label="数量">
                        </el-table-column>
                        <el-table-column
                            prop="goodsSiglePrice"
                            label="单价">
                        </el-table-column>
                        <el-table-column
                            prop="goodsTotalPrice"
                            label="总价"
                            show-overflow-tooltip>
                        </el-table-column>
                    </el-table>
                    <div class="filter-item">
                        <div class="filter-item-key">总价：</div>
                        <div class="filter-item-val">
                            {{totalPay}}
                        </div>
                    </div>
                    <div class="filter-item mt8">
                        <div class="filter-item-key">支付密码：</div>
                        <div class="filter-item-val">
                            <el-input placeholder="请输入密码" v-model="payCode" size="mini"
                                      type="password"></el-input>
                        </div>
                    </div>
                </div>

                <span slot="footer" class="dialog-footer">
                                <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
                                <el-button type="primary" @click="handlePay" size="mini">确 定</el-button>
                            </span>
            </el-dialog>

        </div>
    </div>

</template>

<script>
    import _axios from "../../utils/axios";

    export default {
        name: "cart",
        data() {
            return {
                id: '',
                dialogVisible: false,
                payCode: '',
                multipleSelection: [],
                cartList: [],
                userInfo: '',
                totalPay: 0,
            }
        },
        methods: {
            getCartList() {
                this.$api.mall.cartList({
                    userId: sessionStorage.getItem('id')
                }).then(res => {
                    this.cartList = res.data;
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                this.totalPay = 0;
                this.multipleSelection.forEach(item => {
                    this.totalPay = parseFloat(this.totalPay) + parseFloat(item.goodsTotalPrice);
                })
            },
            handleDelete() {
                let delList = [];
                this.multipleSelection.forEach(item => {
                    delList.push(item.id);
                })
                this.$api.mall.cartDel({cartItemIdList: delList}).then(res => {
                    if (res.code === 200) {
                        this.$message.success('操作成功');
                        this.getCartList();
                    }
                })
            },
            handlePay() {
                let orderGoodsDtoList = [];
                this.multipleSelection.forEach(item => {
                    orderGoodsDtoList.push({
                        "goodsCount": item.goodsCount,
                        "goodsId": item.goodsId,
                        "goodsName": item.goodsName,
                        "goodsSiglePrice": item.goodsSiglePrice,
                        "goodsTotalPrice": item.goodsTotalPrice,
                        "sellerId": item.sellerId,
                        "sellerMobile": item.sellerMobile,
                        "sellerName": item.sellerName
                    })
                });
                this.$api.mall.addOrder({
                    "address": this.userInfo.address,
                    "orderGoodsDtoList": orderGoodsDtoList,
                    "payCode": this.payCode,
                    "receiveMobile": this.userInfo.mobile,
                    "receiver": this.userInfo.name,
                    "userId": this.id
                }).then(res => {
                    if (res.code === 200) {
                        this.$message.success('交易成功');
                        this.handleDelete();
                        this.dialogVisible = false;
                    } else {
                        this.$message.error(res.msg);
                        this.payCode = '';
                        this.dialogVisible = false;
                    }


                })
            }
        },
        mounted() {
            this.getCartList();
            this.id = sessionStorage.getItem('id')
        },
        watch: {
            'dialogVisible'(val) {
                if (val) {
                    _axios.get('/api/api/user/getById?userId=' + this.id).then(res => {
                        this.userInfo = res.data;
                    })
                }
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
    .cart {
        .right {
            float: right;
        }
        .el-dialog__body {
            padding-bottom: 0px;
        }
    }

</style>
